<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{
        /*padding: 0;
        margin: 0;*/
    }
    body{
        background-color: #fff;
        font-size: 30px;
    }
    canvas{
        background-color: #fff;
        border:1px solid black;
    }

    </style>
    <script type="text/javascript" src="jCanvaScript.1.5.18.js"></script>
</head>
<body>
    <canvas id="c1" width="400" height="400"></canvas>
    <canvas id="c2" width="400" height="400"></canvas>
    <canvas id="c3" width="400" height="400"></canvas>
    <img src="" id="img1">
    <canvas id="c4" width="400" height="400"></canvas>
    <canvas id="c5" width="400" height="400"></canvas>
    <canvas id="c6" width="400" height="400"></canvas>
    <input type="button" value="点击" id="input1">

    <script type="text/javascript">


window.onload  = function(){

//---------globalAlpha-------------------------------------------
var oC1 = document.getElementById("c1");
var oGC1 = oC1.getContext("2d");

oGC1.fillRect(0,0,100,100);
// oGC1.fillStyle = "rgba(250,0,0,0.5)";
oGC1.fillStyle = "red";
oGC1.globalAlpha = 0.5;
oGC1.fillRect(50,50,100,100);



//----------globalCompositeOperation------------
var oC2 = document.getElementById("c2");
var oGC2 = oC2.getContext("2d");

oGC2.fillRect(0,0,100,100);
oGC2.fillStyle = "red";
oGC2.globalCompositeOperation = "xor";
oGC2.fillRect(50,50,100,100);



//-------------toDataURL---------------------------------
var oC3 = document.getElementById("c3");
var oGC3 = oC3.getContext("2d");
var oImg = document.getElementById("img1");
oGC3.fillRect(0,0,100,100);

console.log(oC3.toDataURL());
oImg.src = oC3.toDataURL();


//----------------事件操作------------------------------
var oC4 = document.getElementById("c4");
var oGC4 = oC4.getContext("2d");

oGC4.beginPath();
oGC4.arc(100,100,50,0,2*Math.PI);
oGC4.closePath();
oGC4.fill();


oGC4.beginPath();
oGC4.arc(200,200,50,0,2*Math.PI);
oGC4.closePath();
oGC4.fill();

console.log(oC4.offsetLeft, oC4.offsetTop);
oC4.onmousedown = function(ev){
    var ev = ev || window.event;
    var x = ev.pageX - oC4.offsetLeft;
    var y = ev.pageY - oC4.offsetTop;
    console.log(ev.pageX, ev.pageY);
    console.log(x,y)
    if(oGC4.isPointInPath(x,y)){
        console.log("aaa");
    }
}


//---------------事件操作-------------------------------
var oC5 = document.getElementById("c5");
var oGC5 = oC5.getContext("2d");

// 把绘制图像的操作封装成一个类
function Shape(x, y, r){
    this.x = x;
    this.y = y;
    this.r = r;
    oGC5.beginPath();
    oGC5.arc(this.x, this.y, this.r, 0, Math.PI*2);
    oGC5.closePath();
    oGC5.fill();
}

Shape.prototype.reDraw = function(point){
    oGC5.beginPath();
    oGC5.arc(this.x, this.y, this.r, 0, Math.PI*2);
    oGC5.closePath();
    oGC5.fill();
    if(oGC5.isPointInPath(point.x, point.y)){
        this.click();
    };
}

// 创建两个对象
var c1 = new Shape(100,100,50);
var c2 = new Shape(200,200,50);

// 给这两个对象添加各自的方法
c1.click = function(){
    console.log("c1 clicked");
}
c2.click = function(){
    console.log("c2 clicked");
}


oC5.onmousedown = function(ev){
    var ev = ev || window.event;
    var point = {
        x : ev.pageX - oC5.offsetLeft,
        y : ev.pageY - oC5.offsetTop
    };
    console.log(point);
    c1.reDraw(point);
    c2.reDraw(point);
}

//-----------使用jCanvaScript.1.5.18.js-----------------------------------
var oC6 = document.getElementById("c6");
var oGC6 = oC6.getContext("2d");
var oInput = document.getElementById("input1");

oInput.onclick = function(){
    // jc("#circle").color("rgba(0,255,0,0.5)")
    jc("#circle").animate({x: 200, y:200, radius:10, color:"rgba(0,255,0,0.5)"},2000);
}

jc.start('c6',true);  // 第二个参数表示重绘

jc.rect(10,10,100,100,'rgba(255,0,0,0.5)',1).click(function(){
    console.log("rect clicked");
});
jc.circle(100,100,100,'rgba(0,0,255,0.5)',1).id("circle").click(function(){
    console.log("circle clicked");
}).draggable();


jc.start('c6');



}
   </script>
</body>
</html>